<template>
  <div>
    <div class="mainContent">
      <div class="video">
        <video src="./../../public/weather.mp4" autoplay="true" controls="true" width="100%">没有显示视频</video>
      </div>
      <div class="weather">
        <div class="city">{{province+'省'+city+'天气预报'}}</div>
        <span>更新时间：{{reportTime}}</span>
        <ul v-for="(item,index) in forecasts" :key="index">
          <li>
            <el-row>
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <span class="date">{{item.date}}</span>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="grid-content bg-purple-light">
                  <span class="week">{{item.week}}</span>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="grid-content bg-purple">
                  <span class="dayWeather">{{item.dayWeather}}</span>
                </div>
              </el-col>

              <el-col :span="5">
                <div class="grid-content bg-purple">
                  <span class="dayWind">{{item.dayWindDir}}</span>
                </div>
              </el-col>
            </el-row>
          </li>
        </ul>
      </div>

      <h1 class="learn">天资的充分发挥和个人的勤学苦练是成正比例的。—— 郭沫若</h1>
      <div class="timeTips">
        <ul>
          <li>
            <timeTips />
          </li>
        </ul>
      </div>
      <!-- <el-carousel :interval="4000" type="card">
        <el-carousel-item>
          <img src="./../../public/image/1号.jpg" alt />
        </el-carousel-item>
        <el-carousel-item>
          <img src="./../../public/image/2号.jpg" alt />
        </el-carousel-item>
        <el-carousel-item>
          <img src="./../../public/image/3号.jpg" alt />
        </el-carousel-item>
        <el-carousel-item>
          <img src="./../../public/image/4号.jpg" alt />
        </el-carousel-item>
        <el-carousel-item>
          <img src="./../../public/image/5号.jpg" alt />
        </el-carousel-item>
        <el-carousel-item>
          <img src="./../../public/image/6号.jpg" alt />
        </el-carousel-item>
        <el-carousel-item>
          <img src="./../../public/image/7号.jpg" alt />
        </el-carousel-item>
        <el-carousel-item>
          <img src="./../../public/image/8号.jpg" alt />
        </el-carousel-item>
      </el-carousel>-->
    </div>

    <!-- <div class="backgroundImage">
      <img src="./../../public/background.jpg" alt />
    </div>-->
  </div>
</template>

<script>
import timeTips from "./../components/timeTips/tips.vue";
export default {
  name: "mainContent",
  components: {
    timeTips,
  },
  data() {
    return {
      city: "",
      province: "",
      reportTime: "",
      forecasts: [],
    };
  },
  created() {
    this.weather();
  },
  methods: {
    weather() {
      console.log();
      AMap.plugin("AMap.Weather", () => {
        let weather = new AMap.Weather();
        weather.getForecast("惠州市", (err, data) => {
          this.city = data.city;
          this.province = data.province;
          this.reportTime = data.reportTime;
          this.forecasts = data.forecasts;
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.mainContent {
  position: relative;
  top: 130px;
  z-index: 99;
  .learn {
    position: absolute;
    top: -30px;
    left: 0;
    color: rgb(249, 249, 249);
    font-size: 20px;
  }
  .backgroundImage {
    display: block;
    text-align: center;
  }
}
.el-carousel__item img {
  width: 100%;
  height: 100%;
  border: 2px solid rgb(114, 112, 112);
}

.el-carousel__item:nth-child(2n) {
  background-color: #1566c2;
  //   background-image: url(./../../public/image/1号.jpg);
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.backgroundImage {
  width: 100%;
  height: 100%;
}
.weather {
  width: 100%;
  height: 400px;

  padding-left: 10px;
  padding-top: 10px;
  font-size: 12px;
  .date,
  .week,
  .dayWeather,
  .nightWeather,
  .dayWind {
    display: inline-block;
    padding-right: 100px;
    margin: 30px 0;
    border-bottom: 1px solid #eee;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
  }
}
.video {
  position: absolute;
  top: -350px;
  left: 0;
  opacity: 0.6;
}
.city {
  float: left;
  color: rgb(245, 11, 26);
  padding-right: 10px;
}
.timeTips {
  margin: 50px 0px 10px 0;
}
</style>